<template>
    <div class="rootMain">
        <div class="menu flex-align">
            <div
                class="menuItem c333 fz18 pointer"
                :class="currentIndex == index ? 'c1C8' : ''"
                v-for="(item, index) in menuList"
                :key="index"
                @click="clickMenu(item, index)"
            >
                {{ item.name }}
            </div>
        </div>

        <!-- 关注 -->
        <div v-if="currentIndex == 0">
            <div class="count c333 fz14">{{ followsList.length }}位关注</div>

            <FansFollowsItem
                v-for="(item, index) in followsList"
                :key="index"
                :item="item"
                @click="setFollow(item)"
            ></FansFollowsItem>
        </div>
        <!-- 粉丝 -->
        <div v-if="currentIndex == 1">
            <div class="count c333 fz14">{{ fansList.length }}位粉丝</div>

            <FansFollowsItem
                v-for="(item, index) in fansList"
                :key="index"
                :item="item"
                @click="setFollow(item)"
            ></FansFollowsItem>
        </div>

        <div class="page">
            <el-pagination
                v-show="count > limit"
                background
                layout="prev, pager, next"
                :page-size="limit"
                :total="count"
                @current-change="changePage"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
import FansFollowsItem from "@/components/userCenter/MyFansFollows/FansFollowsItem.vue";
import { getMyFollowFans, setFollow } from "@/assets/api/userCenterApi";

import { mapState, mapMutations } from "vuex";

export default {
    components: { FansFollowsItem },
    metaInfo() {
        return {
            title: "个人中心-粉丝关注",
            meta: [{ name: "keywords", content: "小竹,财税,小竹财税" }],
        };
    },
    data() {
        return {
            currentIndex: 0,
            page: 1,
            limit: 10,
            count: 0,
            menuList: [
                { name: "关注", type: 1 },
                // { name: '粉丝', type: 2 },
            ],
            followsList: [],
            fansList: [],
        };
    },
    watch: {
      
    },
    computed: {},
    mounted() {
        this.getMyFollowFans();
    },
    methods: {
        clickMenu(item, index) {
            this.currentIndex = index;
            this.getMyFollowFans();
        },
        //获取关注及粉丝的数据
        async getMyFollowFans() {
            var params = {
                type: this.menuList[this.currentIndex].type,
                page: this.page,
                limit: this.limit,
            };
            let res = await getMyFollowFans(params);
            console.log("fensi", res);
            if (res.code == 1) {
                if (this.currentIndex == 0) {
                    //关注
                    this.followsList = res.data;
                    this.count = res.data[0].datacount;
                } else {
                    //粉丝
                    this.fansList = res.data;
                    this.count = res.data[0].datacount;
                }
            }
        },

        //关注
        async setFollow(item) {
            let res = await setFollow({ uid: item.id });
            console.log("关注", res);
            if (res.code == 1) {
                this.$message({
                    message: item.is_follow == 0 ? "关注成功" : "取消关注",
                    type: "success",
                });
                this.getMyFollowFans();
            }
        },
        changePage(e) {
            this.page = e;
            this.getMyFollowFans();
        },
    },
};
</script>

<style lang="scss" scoped>
@import url("@/assets/static/reset.css");
.rootMain {
    border-radius: 10px;
    background-color: #fff;
    margin-left: 20px;

    .menu {
        padding: 0 40px;
        background-color: #fff;
        width: 940px;
        height: 80px;
        border-bottom: 1px solid #f5f5f5;

        .menuItem {
            margin-right: 40px;
        }
    }
    .count {
        margin-top: 30px;
        margin-left: 30px;
    }
}

.page {
    padding-top: 13px;
    padding-bottom: 63px;
    display: flex;
    justify-content: center;
}
</style>./myfansfollows.vue
